<template>
  <div class="system-edit-email-container">
    <el-dialog :title="formData.title" v-model="isShowDialog" width="769px">
      <el-form ref="formRef" :model="formData" :rules="rules" size="default" label-width="90px">
        <el-row :gutter="35">
          <el-col :xs="30" :sm="20" :md="14" :lg="14" :xl="14" class="mb20">
            <el-form-item label="邮箱地址" prop="name">
              <el-input v-model="formData.email" placeholder="请输入合法的邮箱地址" clearable></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- <div class="emailList" style="display: flex;">
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>469688010@qq.com</div>
        <div>dec.dou@sicsi.org.cn</div>
        <div>dec.dou@sicsi.org.cn</div>
      </div> -->
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" @click="onSubmit" size="default" :loading="loading">发送</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, defineComponent, ref, getCurrentInstance, unref } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute, useRouter } from 'vue-router';
import { getEmailTmp, postEmailTest } from '/@/api/system/mailtmp';

const route = useRoute();
const router = useRouter();

const state = reactive({
	formData: {
		title: '发送测试邮件',
		id: 0,
		email: '',
	},
	rules: {
		email: [{ required: true, message: '填写邮件地址', trigger: 'blur' }],
	},
	isShowDialog: false,
	loading: false,
	emailId: 0 as number,
});

const { formData, isShowDialog, rules, loading } = toRefs(state);

function onCancel() {
	state.loading = false;
	state.isShowDialog = false;
}

//
function onSubmit() {
	state.loading = true;
	if (state.formData.id > 0) {
		postEmailTest(state.formData).then((rep) => {
			ElMessage.success('测试邮件发送成功');
			state.loading = false;
			state.isShowDialog = false;
		});
	}
}

function openDialog(id?: number) {
	state.emailId = Number(id);
	state.formData.id = state.emailId;
	state.isShowDialog = true;
}

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.tree-border {
	margin-top: 5px;
	border: 1px solid #e5e6e7 !important;
	background: #fff none !important;
	border-radius: 4px;
}
.system-edit-role-container {
	.menu-data-tree {
		border: var(--el-input-border, var(--el-border-base));
		border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
		padding: 5px;
	}
}
.emailList {
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}
.emailList div {
	width: 22%;
	margin: 8px 10px;
	background-color: #c7c4c4;
	color: #000;
	height: 30px;
	line-height: 30px;
	text-align: center;
}
</style>
